<template>
	<view class="tabbarpage-container">
		<!--胶囊上方-->
		<div :style="{'padding-top': statusBarHeight}">
			
		</div>
		<!--胶囊-->
		<div class="head-container" :style="{'height': capsuleHeight}">
			我的
		</div>
		<!--主体-->
		<div class="tabbarpage-body" >
			<div class="body-content">
				<!--用户信息-->
				<div class="usr-info-container">
					<!--头像-->
					<div class="ava-round">
						<img src="./static/logo.png" mode="aspectFit" style="width: 72px;" alt="" />
					</div>
					<!--具体信息-->
					<div class="detail-container">
						<!--昵称-->
						<div class="nickname-container">
							<div class="nickname">{{nickName}}</div>
							<wd-icon @click="changeNickNameShow" name="edit-outline" size="16px"></wd-icon>
						</div>
						<!--累计错题-->
						<div class="quesnum">
							累计纠错{{ quesNum }}道
						</div>
					</div>
				</div>
				<!--选项-->
				<div class="options-container">
					<!--使用说明-->
					<div @click="pageJump(0)" class="option-line dark-purple-card leftin-option">
						<wd-icon color="#fff" name="help-circle" size="18px"></wd-icon>
						<div style="width: 8px;"></div>
						<div>使用说明</div>
						<div style="flex: 1;"></div>
						<wd-icon color="#fff" name="arrow-right" size="22px"></wd-icon>
					</div>
					<!--在线客服-->
					<div @click="pageJump(1)" class="option-line dark-purple-card rightin-option">
						<wd-icon color="#fff" name="call" size="18px"></wd-icon>
						<div style="width: 8px;"></div>
						<div>联系客服</div>
						<div style="flex: 1;"></div>
						<wd-icon color="#fff" name="arrow-right" size="22px"></wd-icon>
					</div>
					<!--问题反馈-->
					<div @click="pageJump(2)" class="option-line dark-purple-card leftin-option">
						<wd-icon color="#fff" name="edit-1" size="18px"></wd-icon>
						<div style="width: 8px;"></div>
						<div>问题反馈</div>
						<div style="flex: 1;"></div>
						<wd-icon color="#fff" name="arrow-right" size="22px"></wd-icon>
					</div>
					<!--用户协议-->
					<div @click="pageJump(3)" class="option-line dark-purple-card rightin-option">
						<wd-icon color="#fff" name="file" size="18px"></wd-icon>
						<div style="width: 8px;"></div>
						<div>用户协议</div>
						<div style="flex: 1;"></div>
						<wd-icon color="#fff" name="arrow-right" size="22px"></wd-icon>
					</div>
				</div>
			</div>
			<!--更改昵称-->
			<transition name="fade">
				<MineChangeNickName @changeNickName="changeNickNameSuccess" @close="changeNickNameShow" v-if="showingChangeNickName"></MineChangeNickName>
			</transition>
			<!--底部tabbar占据高度72px-->
		</div>
		<!--Tabbar-->
		<TabbarCom :tabbarIndex="4" class="tabbarpage-tabbar"/>
	</view>
</template>

<script setup>
	
	import { preset } from '@/js/preset.js'
	import TabbarCom from '@/components/TabbarCom.vue'
	import MineChangeNickName from '@/components/MineChangeNickName.vue'
	import { onBeforeMount, ref } from 'vue';
	import { globalProps } from '@/js/global.js'
	import { onShow } from '@dcloudio/uni-app';
	
	onShow(() => {
		getQuesNum()
	})
	
	const statusBarHeight = ref(globalProps.statusBarHeight)
	const capsuleHeight = ref(globalProps.capsuleHeight)
	onBeforeMount(()=>{
		uni.hideTabBar({
			animation: false
		})
	})
	
	const getQuesNum = ()=>{
		uni.request({
		  url: globalProps.baseApi + 'cuotiji/NumByUserID',
		  method: 'GET',
		  data:{
			  userID: globalProps.userInfo.id
		  },
		  success: function (res) {
		    console.log('请求成功', res.data);
		    quesNum.value = res.data
		  },
		  fail: function (err) {
		    console.log('请求失败', err);
		    uni.showToast({
		    	title: '获取纠错数量失败',
				icon: 'error'
		    })
		  }
		});

	}
	//数据
	const nickName = ref(globalProps.userInfo.nickname)
	const quesNum = ref(0)
	const helperWechat = ref(preset.helperWechat)
	//更改昵称
	const showingChangeNickName = ref(false)
	const changeNickNameShow = ()=>{
		showingChangeNickName.value = !showingChangeNickName.value
	}
	const changeNickNameSuccess = (newNickName)=>{
		console.log(newNickName)
		nickName.value = newNickName
	}
	//页面跳转
	const pageJump = (index)=>{
		let jumpUrl = ''
		switch(index){
			case 0:
				uni.navigateTo({
					url: '/pages/minedeep/MineInstructionPage/MineInstructionPage'
				})
				break;
			case 1: 
				uni.setClipboardData({
				        data: helperWechat.value,
				        success() {
				          uni.showToast({
				            title: '已复制客服微信',
				            icon: 'success'
				          });
				        },
				        fail() {
				          uni.showToast({
				            title: '复制客服联系失败',
				            icon: 'error'
				          });
				        }
				      });
				break;
			case 2: 
				uni.navigateTo({
					url: '/pages/minedeep/MineProblemPage/MineProblemPage'
				})
				break;
			case 3: 
				uni.navigateTo({
					url: '/pages/minedeep/MineAgreementPage/MineAgreementPage'
				})
				break;
		}
	}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.head-container{
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		letter-spacing: 1px;
	}
	.body-content{
		position: absolute;
		top: 0;
		bottom: 72px;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}
	/*用户信息*/
	.usr-info-container{
		height: 132px;
		width: calc(100% - 16px);
		margin: 16px 8px 8px 8px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		animation: top-in-ani 1 .6s;
	}
	.usr-info-container .ava-round{
		height: 86px;
		width: 86px;
		border-radius: 43px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.usr-info-container .detail-container{
		height: 80px;
		width: calc(100% - 180px);
		display: flex;
		flex-direction: column;
		color: #fff;
		justify-content: space-around;
	}
	.nickname-container{
		display: flex;
		align-items: center;
	}
	.nickname-container .nickname{
		font-size: 19px;
		margin-right: 12px;
		max-width: calc(100% - 60px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #fff;
		font-weight: bold;
		letter-spacing: 1px;
	}
	.usr-info-container .quesnum{
		font-size: 13px;
		color: #ddd;
	}
	
	/*选项*/
	.options-container{
		display: flex;
		align-items: center;
		flex-direction: column;
		flex: 1;
		width: calc(100% - 16px);
		margin: 8px;
	}
	.options-container .option-line{
		width: calc(100% - 48px);
		height: 62px;
		margin-bottom: 12px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px;
		border-radius: 12px;
		font-size: 17px;
		letter-spacing: 1px;
	}
	.options-container .leftin-option{
		animation: left-in-ani 1 .6s;
	}
	.options-container .rightin-option{
		animation: right-in-ani 1 .6s;
	}
	
</style>
